<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
</head>
<body>
<div id="app">
<h1>index.html</h1>
    <input type="button" value="测试SpringMVC处理ajax" @click="testAjax()"><br>
    <form th:action="@{/test/RequestBody/form}" method="post">
        用户名：<input type="text" name="username"><br>
        密码：<input type="password" name="password"><br>
        <input type="submit" value="测试@RequestBody获取表单格式的请求参数">
    </form>
    <input type="button" value="测试@RequestBody注解获取json格式的请求参数" @click="testRequestBodyJson()"><br>
    <a th:href="@{/test/ResponseBody}">测试@ResponseBody注解响应浏览器数据</a><br>
    <input type="button" value="测试@ResponseBody注解响应json格式的数据" @click="testResponseBodyJson()"><br>
    <a th:href="@{/test/download}">下载图片</a>
    <hr>
    <form th:action="@{/test/upload}" method="post" enctype="multipart/form-data">
        上传图片<input type="file" name="photo"><br>
        <input type="submit" value="submit"><br>
    </form>
</div>
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>
<script type="text/javascript">
  let vue=new Vue({
      el: "#app",
      methods: {
          testAjax() {
              axios({
                  url:"/SpringMVC/test/ajax",//请求路径，需要自己手动加上上下文路径
                  method:"post",//请求方式
                  params:{id:1001},//以name=value的方式发送的请求参数，不管是get还是post，都会被?拼接到请求地址后，请求参数可以通过request.getParameter()获取
                  data:{username:"admin",password:"123456"}//以json格式发送的请求参数，被保存到请求体传输到服务器，请求参数不可以通过request.getParameter()获取
                  }
              ).then(response =>{
                  console.log(response.data)//输出服务器返回的响应
              })
          },
          testRequestBodyJson(){
              axios.post(
                  "/SpringMVC/test/RequestBody/json",
                  {username:"admin",password:"123456",age:19,gender:"男"}
              ).then(response=>{
                  console.log(response.data)//输出服务器返回的响应
              })
          },
          testResponseBodyJson(){
              axios.post(
                  "/SpringMVC/test/ResponseBody/json"
              ).then(response=>{
                  console.log(response.data)//输出服务器返回的响应
              })
          }
      }
  });
</script>
</body>
</html>